<template>
  <view class="container-box">
    <view class="flex justify-between btns">
      <view class=" btn1" @click="upload('iphone')">
        <image src="/static/images/ios.png" mode=""></image>
        <text>iPhone 下载</text>
      </view>
      <view class=" btn2" @click="upload('android')">
        <image src="/static/images/android.png" mode=""></image>
        <text>Andriod 下载</text>
      </view>

    </view>
    <!-- <view class="text-xs text-red text-weight-700 btn-content">目前通过百度手机助手、腾讯应用宝、华为商店、vivo商店、oppo商店都可直接下载</view> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        androidUrl: '',
        iphoneUrl: '',
        h5img: ''
      }
    },
    onLoad() {
      this.getUrl()
    },
    methods: {
      // 获得下载地址
      getUrl(name) {
        this.$api.post(global.apiUrls.post65a4e98278c75).then(res => {
          if (res.data.code == 1) {
            this.iphoneUrl = res.data.data.ios_url
            this.androidUrl = res.data.data.and_url
          }
        })


      },
      upload(name) {
        console.log(this.iphoneUrl)
        if (name == 'iphone') {
          window.location.href = this.iphoneUrl
        } else {
          window.location.href = this.androidUrl
        }
      }
    }
  }
</script>

<style lang="scss">
  // page {
  //  width: 750rpx;
  //  height: 100vh;
  //   background-image: url(/static/appbg.png);
  //   background-size: 100% 100%;
  //   background-repeat: no-repeat;
  // }

  .container-box {
    width: 750rpx;
    height: 100vh;
    position: relative;
    background-image: url('@/static/images/appbg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    //  .bgimg {
    //    width: 100%;
    //    height: 100%;
    //    position: absolute;
    //    top: 0;
    //    left: 0;
    // background-image: url(/static/images/appbg.png);
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    //  }



  }

  .btns {
    position: fixed;
    bottom: 80rpx;
    width: 686rpx;
    left: 32rpx;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 28rpx;
    z-index: 7;
    color: #FF9D00;

    .btn1 {
      width: 330rpx;
      height: 74rpx;
      background-color: #FFF;
      border-radius: 44rpx;
      text-align: center;

      image {
        width: 24rpx;
        height: 28rpx;
        margin-right: 16rpx;
      }
    }

    .btn2 {
      width: 330rpx;
      height: 72rpx;
      background-color: #FFF;
      border-radius: 44rpx;
      text-align: center;

      image {
        width: 24rpx;
        height: 28rpx;
        margin-right: 16rpx;
      }
    }
  }

  .btn-content {
    position: fixed;
    bottom: 30rpx;
    width: 95%;
    left: 3%;
    text-align: center;
  }
</style>